import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';

import ModePwdTone from './modal/ModePwdTone';
import AddrSendTone from './modal/AddrSendTone';
import IdentityTone from './modal/IdentityTone';
import TxtHeader from '../../components/Header/TxtHeader';

import { NoticeBar } from 'antd-mobile';
import { Cancel } from '../../../common/js/Options';

/**
 * 身份验证
 * @param {*} props 
 * @returns 
 */
function ValidAuthTone (props){

    const { findPwdData } = props;

    const navigate = useNavigate();
    const noticeTitle = '请任选一种方式验证，验证通过后可设置新密码';

    const [ curStep, setCurStep ] = useState(0);
    const [ showTip, setShowTip ] = useState(false);
    const [ selectType, setSelectType ] = useState(1);
    // 展示密码修改框
    const [ modePwdtab, setModPwdtab] = useState(false);
    // eslint-disable-next-line
    const [ showTipItem, setShowTipItem ] = useState(3);

    useEffect(()=> {
        console.log('valid-auth->find-password-data->', findPwdData);
    } , [ ]); // eslint-disable-line react-hooks/exhaustive-deps

    const doOption = (type) => {
        setSelectType(type);
        setCurStep(curStep + 1);
    }

    /** 重置处理 */
    const setTip = (itemTip) => {
        setCurStep(0);
        setSelectType(0);
        setShowTip(false);
        setShowTipItem(itemTip);
    }

    const createTipItem =(value, desc) => {
        return (
            <div className='w-mitem' data-v2310001='' onClick={()=> setTip(value)}>{desc}</div>
        )
    }
    /** --------------------------- 数据操作 ------------------------------ */
    
    /** --------------------------- 数据操作 ------------------------------ */

    return (
        <div className='w-lay'>
            <TxtHeader desc={modePwdtab ? '修改密码' : '身份验证'} toBack={()=> navigate(-1)}/>
            {
                modePwdtab ? (
                    <ModePwdTone findPwdData={findPwdData}/>
                ) : 
                    curStep === 0 ? (
                        <>
                            <NoticeBar content={noticeTitle} wrap color='alert' />
                            <div data-v2310001='' className='w-auth-items'>
                                <div data-v2310001='' className='w-auth-item'
                                    onClick={()=> doOption(1)}
                                >
                                    <span>手机号验证 + 身份信息验证</span>
                                    <i data-v2310001=''/>
                                </div>
                                <div data-v2310001='' className='w-auth-item'
                                    onClick={()=> doOption(2)}
                                >
                                    <span>手机号验证 + 历史收获人验证</span>
                                    <i data-v2310001=''/>
                                </div>
                            </div>
                        </>
                    ) : (
                        selectType === 1 ? 
                            <IdentityTone findPwdData={findPwdData} curStep={curStep} setModPwdtab={setModPwdtab}/>
                        :
                            <AddrSendTone findPwdData={findPwdData} curStep={curStep} setModPwdtab={setModPwdtab}/>
                    ) 
            }

            {
                curStep > 0 ? (
                    <div data-v2310001='' className='w-tip-text'>
                        <p data-v2310001='' onClick={()=> setShowTip(true)}>遇到问题？</p>
                    </div>
                ) : null
            }

            <div data-v2310001='' className='w-modal' style={{ display: showTip ? '' : 'none'}}>
                <div data-v2310001='' className='w-modal-mask' onClick={()=> setShowTip(false)}/>
                <div data-v2310001='' className='w-modal-body'>
                    <div className='w-modal-head' data-v2310001=''>
                        <span>遇到问题？可以尝试以下几种途径解决</span>
                    </div>
                    <div className='w-modal-content' data-v2310001=''>
                        { createTipItem(1, '账号申诉') }
                        { createTipItem(2, '收不到短信') }
                        { createTipItem(3, '选择其他方式验证') }
                    </div>

                    <div className='w-modal-foot' data-v2310001=''>
                        <div className='w-mitem' data-v2310001='' onClick={()=> setShowTip(false)}>
                            <span><Cancel/></span>
                            <span style={{ paddingLeft: '.1rem'}}>返回</span>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    )
}

const state2Props = (state) => {
    return {
        findPwdData: state.getIn(['findPwd', 'findPwdData'])
    }
}

export default connect(state2Props, null)(ValidAuthTone);